<template>
    <div class="management-less">
        <div class="border-s my-test">
            <el-table :data="tableData" style="width: 100%" :border="false">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="corporation" label="单位"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="organizationName" label="考试名称"></el-table-column>
                <el-table-column prop="examTime" label="考试日期"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="dataId(scope.row.id),parmes.id = scope.row.id,outerVisible=true" type="text" size="medium" class="button-my-test">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formInline.pageable.size"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="pageFy"
            :total="total">
            </el-pagination>
        <el-dialog title="审核" :visible.sync="outerVisible">
            <ul class="shenhe-ul" v-if="JSON.stringify(byOrderData) != '{}'">
                <li>缓考理由：{{byOrderData.reason}}</li>
                <li>考期季度：{{byOrderData.season}}</li>
                <li>手机号：{{byOrderData.phone}}</li>
                <li>申请文件：<a :href="$imgPath(byOrderData.fileUrl)" download="w3logo">{{byOrderData.fileUrl}}</a></li>
            </ul>
            <div slot="footer" class="dialog-footer" v-if="JSON.stringify(byOrderData) != '{}'">
                <el-button @click="centerDialogVisible = true,outerVisible = false,parmes.id = byOrderData.id">驳回</el-button>
                <el-button type="primary" @click="parmes.reject = true,parmes.id = byOrderData.id,orderAudit(),outerVisible = false">通过</el-button>
            </div>
        </el-dialog>
        <el-dialog title="驳回" class="rejected" :visible.sync="centerDialogVisible" width="30%" center>
            <el-form ref="form" :model="parmes" label-width="80px">
                <el-form-item label="请输入">
                    <el-input type="textarea" placeholder="驳回原因..." v-model="parmes.reason"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="centerDialogVisible = false">取 消</el-button>
                <el-button size="medium" type="primary" @click="centerDialogVisible = false,parmes.reject = false,orderAudit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            formInline: {
                conditions:[],
                pageable:{
                    current:1,
                    size:10
                },
            },
            parmes:{
                id:'',
                reason:'',
                reject:false
            },
            tableData:[],
            outerVisible:false,
            rejected:{
                message:''
            },
            styleType:'',
            byOrderData:{},
            centerDialogVisible:false,
            total:0,
            
        }
    },
    mounted(){
        this.listPage()
    },
    methods:{
        // 缓考列表
        listPage(){
            apiHttp.apiIndex.delayedPage(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                    this.total = Number(resp.data.total)
                }
            })
        },
        // 查询单条数据
        dataId(id){
            apiHttp.apiIndex.delayedId(id).then(resp=>{
                if(resp.code == 0){
                    this.byOrderData = resp.data
                }
            })
        },
        orderAudit(){
            apiHttp.apiIndex.sysDelayedAudit(this.parmes).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        type: 'success',
                        message: '成功!'
                    })
                    this.listPage()
                }
            })
        },
        // 分页加载
        handleCurrentChange(val){
            this.formInline.pageable.current = val
            this.listPage()
        },
        pageFy(val){
            this.formInline.pageable.size = val
            this.listPage()
        },
    }
}
</script>
<style lang="less">
.management-less{
    .el-form{
        .el-form-item{
            .el-form-item__content{
                .el-button--primary{
                    background-color: #5d2805;
                    border-color: #5d2805;
                }
            }
        }
    }
    .shenhe-ul{
        text-align: left;
        li{
            padding: 0 20px;
            line-height: 30px;
            color: #000;
            display: inline-block;
            width: 28%;
        }
    }
    .export-less{
        text-align: left;
        margin-bottom: 15px;
        .jiafei{
            display: block;
            margin-top: 15px;
        }
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 25px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
        .el-textarea__inner{
            min-height: 100px !important;
        }
    }
    .dialog-footer{
        text-align: center;
    }
}
.el-message-box__message{
    font-size: 18px;
}
</style>

